<template>
  <div class="echarts" ref="echart1" style="width: 560px;height: 500px"></div>
</template>

<script>
import {getCurrentInstance,  ref, watch, defineEmits, reactive, toRefs} from "vue";

export default {
  name: "echarts_relation",
  props:['dataSource'],
  setup(){
    const { proxy } = getCurrentInstance();
    watch(proxy.$props,()=>{
      showPlot()
    })
    const option =reactive( {
      title: {
        text: ''
      },
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      color: ['#d6604d', '#1f77b4', '#ff7f0e', '#2ca02c'], // 定义固定颜色
      series: [
        {
          type: 'graph',
          layout: 'none',
          symbolSize: 50,
          roam: true,
          label: {
            show: true
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          data: [],
          // links: [],
          links: [],
          categories: [],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
          }
        }
      ],
      legend: [
        {
          data: []
        }
      ]
    });
    function color16(){//十六进制颜色随机
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      return color;
    }
    function getCategory(cancer,cancerType){
      return cancerType.indexOf(cancer)
    }
    // 取中心点
    function getCenterPos() {
      let x = (560) * 0.5
      let y = (400) * 0.5
      return {
        x,
        y
      }
    }
    /**
     * @param {Object} {x,y} 圆心坐标
     * @param {Number} index 索引值，即该子节点在所有同类型子节点中的位置索引（数组索引位置）
     * @params {Number} nodesLen 子节点个数
     * @params {Number} radius 半径
     */
    function circledNodesPosition(x, y, index = 1, nodesLen, radius = 100) {
      let avd = 360 / nodesLen;
      let ahd = avd * Math.PI / 180;
      return {
        x: Math.sin((ahd * index)) * radius + x,
        y: Math.cos((ahd * index)) * radius + y
      };
    }
    function rendeChart() {
      const myeChart = proxy.$echarts.init(proxy.$refs.echart1)
      myeChart.setOption(option)
    }
    function showPlot() {
      option.legend[0].data = []
      option.series[0].data=[]
      option.series[0].links=[]
      option.series[0].categories=[{name:'SNV'}]
      option.color = ['#d6604d', '#1f77b4', '#ff7f0e', '#2ca02c']; // 初始化固定颜色
      let cancerList = ['SNV']
      let center = proxy.$props.dataSource.center
      let nodes = proxy.$props.dataSource.nodes
      let cancerType= proxy.$props.dataSource.cancerType
      console.log(center,nodes)
      let centerX = getCenterPos().x
      let centerY = getCenterPos().y
      // 处理多cancer类型
      for (let j = 0;j < cancerType.length;j++){
        let aList = cancerType[j].split(',')
        if (aList.length != 1){
          continue
        }else {
          cancerList.push(cancerType[j])
        }
      }
      cancerList.push('Both')
      // 处理单个cancer类型type颜色及type
      for (let j = 1;j < cancerList.length;j++){
        option.series[0].categories.push({name: cancerList[j]})
      }
      option.legend[0].data=cancerList
      let centerNode = {id: 0,name: center,x: centerX,y: centerY,category: getCategory('SNV',cancerList)}
      option.series[0].data.push(centerNode)
      // option.series[0].categories.push({name: 'Multiple cancer types'})
      for (let i = 0;i < nodes.length;i++){
        let nodeX = circledNodesPosition(centerX,centerY,i,nodes.length).x
        let nodeY = circledNodesPosition(centerX,centerY,i,nodes.length).y
        if (nodes[i].cancerType.split(',').length != 1){
          nodes[i].cancerType = 'Both'
        }
        let node = {id: i+1,name: nodes[i].cpg,x: nodeX,y: nodeY,category: getCategory(nodes[i].cancerType,cancerList)}
        option.series[0].data.push(node)
        option.series[0].links.push({source: 0, target: i+1})
      }
      console.log(option.series[0].data,option.series[0].links)
      // console.log(option.color,option.series[0].links, option.series[0].data,option.series[0].categories)
      setTimeout(() => {rendeChart()}, 2000)
    }
    // showPlot()
  }
}
</script>

<style scoped>

</style>
